﻿@page
@model Emprise.Web.Pages.User.ModifyPasswordModel
@{
    ViewData["Title"] = "修改密码";
}
@{
    Layout = "_Layout";
}
    <div class="big_bg" id="app">
        <div class="nav">
            <h2 class="nav-title">修改密码</h2>
            <a href="@(Url.Page("/User/Login"))" class="nav-back"><span><<返回</span></a>
        </div>

        <div class="main">
            <div>

                <div class="login-nonreg">
                    <form>
                        <div class="form-text-login">
                            <label>原密码：</label>
                            <input type="password" class="form-text" v-model="password" />
                            <a href="javascript:;" class="form-text-clear" v-show="password" v-on:click="password=''"><i class="icon icon-clear"></i></a>
                        </div>

                        <div class="form-text-login">
                            <label>新密码：</label>
                            <input type="password" class="form-text" v-model="newpassword" />
                            <a href="javascript:;" class="form-text-clear" v-show="newpassword" v-on:click="newpassword=''"><i class="icon icon-clear"></i></a>
                        </div>

                        <div class="form-text-login">
                            <label>重复：</label>
                            <input type="password" class="form-text" v-model="newpassword2" />
                            <a href="javascript:;" class="form-text-clear" v-show="newpassword2" v-on:click="newpassword2=''"><i class="icon icon-clear"></i></a>
                        </div>

                    </form>
                </div>
                <div class="fn-mt-login fn-mlr">
                    <a class="btn btn-bar-tawny" href="javascript:;" v-on:click="modify"> 确 定 </a>
                </div>

                <div class="fn-mt fn-mlr mt15"><span class="tips">{{tips}}</span></div>
            </div>

        </div>

        @await Html.PartialAsync("_Footer", Model.SiteConfig)

        <div class="toast" v-show="toastOptions.show">
            {{toastOptions.text}}
        </div>

        <div class="loading" v-show="loading">
            <img src="/images/loading.gif">
        </div>
    </div>
@section Scripts {


    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                password: "",
                newpassword: "",
                newpassword2:"",
                tips: "",
                loading: 0,
                toastOptions: {
                    show: 0,
                    text: ""
                }
            },
            methods: {
                modify: function () {
                    var that = this;
                    that.tips = "";

                    if (!that.password || !that.newpassword) {
                        that.tips = "请输入密码";
                        return false;
                    }
                    
                    if (that.newpassword!=that.newpassword2) {
                        that.tips = "两次新密码必须一致";
                        return false;
                    }
  

                    that.loading = 1;

                    axios.post("/api/user/modifypassword", {
                        password: that.password,
                        newpassword: that.newpassword
                    })
                    .then(function (response) {
                        var result = response.data;
                        if (result.status) {
                            that.toast("修改密码成功！");
                            setTimeout(function () {
                                location.href = "@(Url.Page("/User/Index"))";
                            }, 3000);    
                        } else {
                            var error = result.errorMessage || "修改密码失败";
                            if (result.data) {
                                error += "<br>" + result.data;
                            }
                            that.tips = error;
                        }
                        that.loading = 0;
                    })
                    .catch(function (error) {
                        console.log(error);
                        that.loading = 0;
                    });
                },
                toast: function (message,t) {
                    var that = this;
                    that.toastOptions.text = message;
                    that.toastOptions.show = 1;
                    if (t) {
                        setTimeout(function () {
                              that.toastOptions.show = 0;
                        }, t);
                    }
                }
            }
        });
@*
    ({
        modify: function () {
            $("#msgTip").html("");

            if (!$("input[name=password]").val()) {
                return false;
            }
            if (!$("input[name=newpassword]").val()) {
                return false;
            }
            if (!$("input[name=newpassword2]").val()) {
                return false;
            }

            if ($("input[name=newpassword]").val() != $("input[name=newpassword2]").val()) {
                $("#msgTip").html("两次新密码必须一致");
                return false;
            }


            var index = layer.load(2);

            $.ajax({
                type: "POST",
                url: "/api/user/modifypassword",
                data: $("form").serialize(),
                success: function (result) {
                    if (result.status) {
                        layer.msg('修改密码成功！');
                        setTimeout(function () {
                            location.href = "@(Url.Page("/User/Index"))";
                        }, 3000);                
                    } else {
                        var error = result.errorMessage||"修改密码失败";
                        if (result.data) {
                            error += "<br>" + result.data;
                        }
                        $("#msgTip").html(error);
                    }
                    layer.close(index);
                }, error: function () {
                    layer.close(index);
                }
            });
        },
        init : function () {
            var that = this;

            $(function () {
                layer.config({
                    skin: 'layui-layer-hei'
                });

                $(document).on("click", "#formModify", function () {
                    that.modify();
                });

                $(document).on("keyup", "input", function () {
                    var obj = $(this);
                    if (obj.val()) {
                        obj.next("a").show();
                    } else {
                        obj.next("a").hide();
                    }
                });

                $(document).on("click", ".form-text-clear", function () {
                    var obj = $(this);
                    obj.prev("input").val("");
                    obj.hide();
                });
            });



        }
    }).init();*@
    </script>
}